<template>
	<footer>
		<ul>
			<router-link :to='{name:item.name}' :key=index v-for='(item,index) in footerNav' exact>
				<li>
					<!-- <router-link :to='item.name'> 这种方法也行-->
					<!-- </router-link> -->
					<i class='iconfont' :class="item.icon"></i>
					<div class="buyNum">
						<p></p>
					</div>
					<br>
					<span>{{item.title}}</span>
				</li>
			</router-link>
		</ul>
	</footer>
</template>

<script>
	export default {
		name: 'Footer',
		data() {
			return {
				footerNav: [{
						title: '首页',
						icon: 'icon-shouye',
						name: 'home'
					},
					{
						title: '线路',
						icon: 'icon-luxian',
						name: 'route'
					},
					{
						title: '项目',
						icon: 'icon-xiangmu',
						name: 'project'
					},
					{
						title: '购物车',
						icon: 'icon-gouwuche',
						name: 'shopcar'
					},
					{
						title: '我的',
						icon: 'icon-wode',
						name: 'mine'
					}
				],
				isSelect: ''
			}
		},
		created() {

		},
		mounted() {
			// this.minHeight = document.documentElement.clientHeight
			// console.log(this.minHeight)
			// var that = this
			// window.onresize = () => {
			// 	that.minHeight = document.documentElement.clientHeight
			// 	console.log(that.minHeight)
			// }
		},
		methods: {

		}
	}
</script>

<style scoped lang='less'>
	footer {
		position: fixed;
		width: 100%;
		bottom: 0;
		background: #fff;
		z-index: 10;
		height: 1.3rem;
		border-top: 0.01rem solid #f6f6f6;

		ul {
			width: 100%;
			height: 1.3rem;
			padding: 0;
			margin: 0;

			li {
				float: left;
				width: 20%;
				height: 1.3rem;
				text-align: center;
				position: relative;

				.iconfont {
					display: inline-block;
					margin-top: 0.2rem;
					font-size: 0.5rem;
					margin-left: 0.05rem;
				}

				span {
					font-size: 0.32rem;
				}

				.buyNum {
					position: absolute;
					width: 0.45rem;
					height: 0.45rem;
					border-radius: 50%;
					background: red;
					top: 0.15rem;
					left: 58%;
					display: none;

					p {
						line-height: 0.25rem;
						font-size: 0.32rem;
						color: #fff;
					}
				}
			}

			.active {
				color: #FE8975;
			}
		}
	}
</style>
